import { ipcWindowUtil } from "@/common/ipcWindow/IpcWindowUtil";
import { WindowName } from "../../../../../electron/appInstance/enums";
import { AttributeTabKey } from "@/constants/Enums";
import { markRaw, reactive } from "vue";
import ShapeStyleConfiguration from "@/modules/model/modals/shapeCustomization/comps/ShapeStyleConfiguration/ShapeStyleConfiguration.vue";
import ShapeKeywordStyleConfiguration from "@/modules/model/modals/shapeCustomization/comps/ShapeKeywordStyleConfiguration/ShapeKeywordStyleConfiguration.vue";
import { ShapeStyleConfigModel } from "@/modules/model/modals/shapeCustomization/comps/ShapeStyleConfiguration/ShapeStyleConfigurationModel";
import { Params } from "./index";
import { ShapeKeywordStyleConfigModel } from "@/modules/model/modals/shapeCustomization/comps/ShapeKeywordStyleConfiguration/ShapeKeywordConfigurationModel";
import { ShapeNameStyleConfigModel } from "@/modules/model/modals/shapeCustomization/comps/ShapeNameStyleConfiguration/shapeNameStyleConfigModel";
import { ShapeLineStyleConfigModel } from "@/modules/model/modals/shapeCustomization/comps/ShapeLineStyleConfiguration/shapeLineStyleConfigModel";
import ShapeNameStyleConfiguration from "@/modules/model/modals/shapeCustomization/comps/ShapeNameStyleConfiguration/ShapeNameStyleConfiguration.vue";
import { ShapeStylePriorityModel } from "@/modules/model/modals/shapeCustomization/comps/ShapeStylePriorityConfiguration/ShapeStylePriorityConfigurationModel";
import { ShapeImageBoxModel } from "@/modules/model/modals/shapeCustomization/comps/ShapeImageBoxConfiguration/ShapeImageBoxConfigurationModel";
import ShapeImageBoxConfiguration from "@/modules/model/modals/shapeCustomization/comps/ShapeImageBoxConfiguration/ShapeImageBoxConfiguration.vue";
import ShapeStylePriorityConfiguration from "@/modules/model/modals/shapeCustomization/comps/ShapeStylePriorityConfiguration/ShapeStylePriorityConfiguration.vue";
import ShapeLineStyleConfiguration from "@/modules/model/modals/shapeCustomization/comps/ShapeLineStyleConfiguration/ShapeLineStyleConfiguration.vue";
import CustomAttributeCompartmentConfiguration from "@/modules/model/modals/shapeCustomization/comps/ShapeCompCustomAttrConfiguration/ShapeCompCustomAttrConfiguration.vue";
import { ShapeCompCustomAttrConfigModel } from "@/modules/model/modals/shapeCustomization/comps/ShapeCompCustomAttrConfiguration/ShapeCompCustomAttrConfigModel";
import ShapeStyleConfigTab from "@/modules/model/modals/shapeCustomization/comps/ShapeStyleConfigTab.vue";
import ShapeCompartmentConfigTab from "@/modules/model/modals/shapeCustomization/comps/ShapeCompartmentConfigTab.vue";

export const tabList = [
  {
    name: "图形样式配置",
    key: AttributeTabKey.ShapeStyleConfiguration,
    comp: markRaw(ShapeStyleConfigTab),
    subList: [
      { name: "图形整体样式", key: AttributeTabKey.ShapeEntityStyleConfiguration, comp: markRaw(ShapeStyleConfiguration) },
      { name: "图形关键字样式", key: AttributeTabKey.KeyWordStyleConfiguration, comp: markRaw(ShapeKeywordStyleConfiguration) },
      { name: "图形名称样式", key: AttributeTabKey.NameStyleConfiguration, comp: markRaw(ShapeNameStyleConfiguration) },
      { name: "线性图形样式", key: AttributeTabKey.LineStyleConfiguration, comp: markRaw(ShapeLineStyleConfiguration) },
      { name: "显示为图片", key: AttributeTabKey.ImageBoxConfiguration, comp: markRaw(ShapeImageBoxConfiguration) },
      { name: "优先级", key: AttributeTabKey.PriorityConfiguration, comp: markRaw(ShapeStylePriorityConfiguration) }
    ]
  },
  {
    name: "图形隔间配置",
    key: AttributeTabKey.ShapeCompartmentConfiguration,
    comp: markRaw(ShapeCompartmentConfigTab),
    subList: [
      {
        name: "自定义属性隔间配置",
        key: AttributeTabKey.ShapeCompartmentCustomAttributeConfiguration,
        comp: markRaw(CustomAttributeCompartmentConfiguration)
      }
      // { name: "模块及子模块隔间配置", key: AttributeTabKey.ModuleCompartmentConfiguration, comp: markRaw(ModuleCompartmentConfiguration) }
    ]
  }
];

export type ShapeStyleValue = {
  enName: string;
  enTips: string;
  key: string;
  name: string;
  value: any;
  comps?: any;
};

export class ShapeCustomizationManagementModel {
  queryParams: Params;
  okLoading = false;
  activeTab = AttributeTabKey.ShapeStyleConfiguration;
  activeStyleTab = AttributeTabKey.ShapeEntityStyleConfiguration;
  activeCompTab = AttributeTabKey.ShapeCompartmentCustomAttributeConfiguration;
  configurationDisabled = false;
  isModelDisabled = false;

  shapeStyleConfigModel: ShapeStyleConfigModel;
  shapeKeywordStyleConfigModel: ShapeKeywordStyleConfigModel;
  shapeNameStyleConfigModel: ShapeNameStyleConfigModel;
  shapeLineStyleConfigModel: ShapeLineStyleConfigModel;
  shapeImageBoxModel: ShapeImageBoxModel;
  shapeStylePriorityModel: ShapeStylePriorityModel;
  shapeCompCustomAttrConfigModel: ShapeCompCustomAttrConfigModel;
  // moduleCompartmentConfiguration: ModuleCompartmentConfigModel
  constructor(params) {
    this.queryParams = params;
    this.shapeStyleConfigModel = reactive(new ShapeStyleConfigModel(this));
    this.shapeKeywordStyleConfigModel = reactive(new ShapeKeywordStyleConfigModel(this));
    this.shapeNameStyleConfigModel = reactive(new ShapeNameStyleConfigModel(this));
    this.shapeLineStyleConfigModel = reactive(new ShapeLineStyleConfigModel(this));
    this.shapeStylePriorityModel = reactive(new ShapeStylePriorityModel(this));
    this.shapeImageBoxModel = reactive(new ShapeImageBoxModel(this));
    this.shapeCompCustomAttrConfigModel = reactive(new ShapeCompCustomAttrConfigModel(this));
    // this.moduleCompartmentConfiguration = reactive(new ModuleCompartmentConfigModel(this));
    this.loadData();
  }

  async loadData() {
    const row = this.queryParams.row && JSON.parse(this.queryParams.row);
    const shapeConfig = row.value && JSON.parse(row.value);
    console.log("shapeConfig", shapeConfig);
    if (shapeConfig) {
      this.shapeStyleConfigModel.initShapeStyleConfig(shapeConfig.shapeStyleConfig.shapeEntityStyleConfig);
      this.shapeKeywordStyleConfigModel.initShapeKeywordConfig(shapeConfig.shapeStyleConfig.shapeKeywordStyleConfig);
      this.shapeNameStyleConfigModel.initNameStyleConfig(shapeConfig.shapeStyleConfig.shapeNameStyleConfig);
      this.shapeLineStyleConfigModel.initLineStyleConfig(shapeConfig.shapeStyleConfig.shapeLineStyleConfig);
      this.shapeImageBoxModel.initImageBoxConfig(shapeConfig.shapeStyleConfig.shapeImageBox);
      this.shapeStylePriorityModel.initShapePriorityConfig(shapeConfig.shapeStyleConfig.shapeStylePriority);
      this.shapeCompCustomAttrConfigModel.initShapeCompCustomAttrConfig();
    }
  }

  handleOk() {
    this.okLoading = true;

    const _shapeStyleConfig = {
      background: this.shapeStyleConfigModel.shapeStyleInfo.find(row => row.key === "background")?.value,
      strokeColor: this.shapeStyleConfigModel.shapeStyleInfo.find(row => row.key === "strokeColor")?.value,
      strokeWidth: this.shapeStyleConfigModel.shapeStyleInfo.find(row => row.key === "strokeWidth")?.value
    };
    const isGradient = this.shapeStyleConfigModel.shapeStyleInfo.find(row => row.key === "backgroundisGradient")?.value;
    const backgroundStartGradient = this.shapeStyleConfigModel.shapeStyleInfo.find(row => row.key === "backgroundStartGradient")?.value;
    const backgroundEndGradient = this.shapeStyleConfigModel.shapeStyleInfo.find(row => row.key === "backgroundEndGradient")?.value;
    if (isGradient && backgroundStartGradient && backgroundEndGradient) {
      _shapeStyleConfig.background = `linear-gradient(to right,${backgroundStartGradient},${backgroundEndGradient})`;
    }

    const _shapeKeywordStyleConfig = {
      fontFamily: this.shapeKeywordStyleConfigModel.shapeStyleMap.get("fontFamily")?.value,
      fontSize: this.shapeKeywordStyleConfigModel.shapeStyleMap.get("fontSize")?.value,
      color: this.shapeKeywordStyleConfigModel.shapeStyleMap.get("color")?.value,
      fontStyle: this.shapeKeywordStyleConfigModel.shapeStyleMap.get("fontStyle")?.value
    };

    const _shapeNameStyleConfig = {
      fontFamily: this.shapeNameStyleConfigModel.shapeStyleMap.get("fontFamily")?.value,
      fontSize: this.shapeNameStyleConfigModel.shapeStyleMap.get("fontSize")?.value,
      color: this.shapeNameStyleConfigModel.shapeStyleMap.get("color")?.value,
      fontStyle: this.shapeNameStyleConfigModel.shapeStyleMap.get("fontStyle")?.value
    };

    const _shapeLineStyleConfig = {
      rightAngle: this.shapeLineStyleConfigModel.shapeStyleMap.get("rightAngle")?.value,
      strokeWidth: this.shapeLineStyleConfigModel.shapeStyleMap.get("strokeWidth")?.value,
      strokeColor: this.shapeLineStyleConfigModel.shapeStyleMap.get("strokeColor")?.value,
      rounded: this.shapeLineStyleConfigModel.shapeStyleMap.get("rounded")?.value,
      dashed: this.shapeLineStyleConfigModel.shapeStyleMap.get("dashed")?.value,
      fontFamily: this.shapeLineStyleConfigModel.shapeStyleMap.get("fontFamily")?.value,
      fontSize: this.shapeLineStyleConfigModel.shapeStyleMap.get("fontSize")?.value,
      color: this.shapeLineStyleConfigModel.shapeStyleMap.get("color")?.value,
      fontStyle: this.shapeLineStyleConfigModel.shapeStyleMap.get("fontStyle")?.value
    };

    const shapeConfigInfo = {
      shapeStyleConfig: {
        shapeEntityStyleConfig: _shapeStyleConfig,
        shapeKeywordStyleConfig: _shapeKeywordStyleConfig,
        shapeNameStyleConfig: _shapeNameStyleConfig,
        shapeLineStyleConfig: _shapeLineStyleConfig,
        shapeImageBox: this.shapeImageBoxModel.shapeStyleInfo[0].value,
        shapeStylePriority: this.shapeStylePriorityModel.shapeStyleInfo[0].value
      },
      shapeCompartmentConfig: {
        shapeCompCustomAttrConfig: this.shapeCompCustomAttrConfigModel.customAttributeConfig
      }
    };
    try {
      ipcWindowUtil.closeWindow({
        windowName: WindowName.ShapeCustomizationWindow,
        success: true,
        shapeConfig: JSON.stringify(shapeConfigInfo)
      });
    } finally {
      this.okLoading = false;
    }
  }

  handleCancel() {
    ipcWindowUtil.closeWindow({ windowName: WindowName.ShapeCustomizationWindow, success: false, shapeConfig: "" });
  }

  changeActiveTab(key: AttributeTabKey) {
    this.activeTab = key;
  }
  changeActiveStyleTab(key: AttributeTabKey) {
    this.activeStyleTab = key;
  }
  changeActiveCompTab(key: AttributeTabKey) {
    this.activeCompTab = key;
  }
}
